<template>
	<view class="content">

		<!-- 首页显示模块 start -->
		<view class="content-item" v-if="searchType == 1">

			<!-- 顶部模块 start -->
			<view class="TopTitle">
				<view class="TopTitle-item">智能穿衣镜</view>
			</view>
			<!-- 顶部模块 end -->

			<!-- 首页制作 start -->
			<view class="index-body">

				<!-- 拍照模块 start -->
				<view class="index-body-item">
					<view class="photo-big" @tap="paizhao">
						<view class="photo-heart">
							<view class="photo-heart-icon">
								<image src="../../static/icon/photograph.png" mode=""></image>
							</view>
							<view class="photo-heart-title">拍照</view>
						</view>
					</view>
				</view>
				<!-- 拍照模块 end -->

				<!-- 亮度显示模块 start -->
				<view class="index-body-price">

					<view class="index-body-price-luminance">
						<view class="price-luminance-title">{{ lightValue }}</view>
						<view class="price-luminance-percent">亮度( % )</view>
					</view>

					<view class="index-body-price-line"></view>

					<view class="index-body-price-luminance">
						<view class="price-luminance-title">2500</view>
						<view class="price-luminance-percent">色温( k )</view>
					</view>

				</view>
				<!-- 亮度显示模块 end -->

				<!-- 开关灯模块 start -->
				<view class="index-body-switch">

					<view class="index-body-switch-item" :class="{'index-body-switch-item-active':isShow1}"
						@tap="isShow1 = !isShow1">
						<view class="index-body-switch-icon">
							<image src="../../static/icon/switch.png" mode=""></image>
						</view>
						<view class="index-body-switch-title">
							开/关 灯
						</view>
					</view>

					<view class="index-body-switch-item" :class="{'index-body-switch-item-active':isShow2}"
						@tap="goManagement">
						<view class="index-body-switch-icon icon-color">
							<image src="../../static/icon/yichu.png" mode=""></image>
						</view>
						<view class="index-body-switch-title">
							衣橱管理
						</view>
					</view>

				</view>
				<!-- 开关灯模块 end -->

				<!-- 亮度调节模块 start -->
				<view class="index-body-tail">

					<view class="index-body-tail-brightness">

						<view class="index-body-tail-T">
							<view>亮度</view>
							<view>{{ lightValue }}%</view>
						</view>

						<view class="index-body-tail-brightness-T">
							<slider @changing="changeLight" @change="changeLight" :value="lightValue" min="0" max="100"
								activeColor="#33a69e" backgroundColor="#eff0f2" block-color="#f0fff5" block-size="40" />
						</view>

					</view>

					<view class="index-body-tail-T">
						<view>色温</view>
						<view>2500k</view>
					</view>

				</view>
				<!-- 亮度调节模块 end -->

			</view>
			<!-- 首页制作 end -->

		</view>
		<!-- 首页显示模块 end -->

		<!-- 上传图片模块 start -->
		<view class="uploadPhoto" v-if="searchType == 2">

			<!-- 返回首页导航模块 start -->
			<view class="uploadPhoto-TopTitle">
				<view class="TopTitle-item1">
					<image src="../../static/icon/back.png" mode="" @tap="goBackIndex"></image>
				</view>
			</view>
			<!-- 返回首页导航模块 end -->

			<!-- 添加属性模块 start -->
			<view class="uploadPhoto-item">
				<!-- 上传的图片与预览模块 start -->
				<view class="uploadPhoto-photo">
					<view class="photo-item">
						<image v-for="(item,index) in tempFilePaths" :src="item" :key="index" @tap="previewImg"></image>
					</view>
				</view>
				<!-- 上传的图片与预览模块 end -->

				<!-- 添加衣服属性模块 start -->
				<view class="uploadPhoto-item-list">

					<!-- 上下衣标签选择模块 start -->
					<view class="uploadPhoto-list">
						<view v-for="(item, index) in labelMTypeName" :key="index" @tap="labelMTypeNameItem(index)"
							class="listItem" :class="{itemActive: MTypeNameCurrentIndex === index}">{{item}}</view>
					</view>
					<!-- 上下衣标签选择模块 end -->

					<!-- 输入框模块 start -->
					<view class="search">
						<view class="search-title">衣服的描述：</view>
						<view class="search-item">
							<uni-search-bar :radius="100" @confirm="search" v-model="labelArr" placeholder="请输入关键字">
							</uni-search-bar>
						</view>
					</view>
					<!-- 输入框模块 end -->

					<!-- 春夏秋冬选择模块 start -->
					<view class="uploadPhoto-list">
						<view v-for="(item, index) in labelSeason" :key="index" @tap="labelSeasonItem(index)"
							class="listItem" :class="{itemActive: SeasonCurrentIndex === index}">{{item}}</view>
					</view>
					<!-- 春夏秋冬选择模块 end -->

				</view>
				<!-- 添加衣服属性模块 end -->

			</view>
			<!-- 添加属性模块 end -->

			<view class="toButton">
				<!-- 上传图片按钮 start -->
				<button type="primary" @tap="goUploadPhoto">上传图片</button>
				<!-- 上传图片按钮 end -->
				<!-- 推荐图片按钮 start -->
				<button type="primary" @tap="goRecommend">推荐衣服</button>
				<!-- 推荐图片按钮 end -->
			</view>

		</view>
		<!-- 上传图片模块 end -->

	</view>
</template>

<script>
	//提升this的作用域
	let _self
	export default {
		data() {
			return {
				searchType: 1,
				tempFilePaths: [],
				labelMTypeName: ['短袖', '长袖', '短裤', '长裤', '裙子', '连衣裙'],
				MTypeNameCurrentIndex: null,
				MTypeNameStr: '',
				labelArr: '',
				labelSeason: ['春季', '夏季', '秋季', '冬季', '春秋季'],
				SeasonCurrentIndex: null,
				SeasonStr: '',
				isShow1: false,
				isShow2: false,
				lightValue: 0,
				userId: ''
			}
		},

		onLoad() {
			_self = this
			uni.getStorage({
				key: 'userId',
				success(res) {
					_self.userId = res.data
				}
			})
		},
		
		watch: {
			// 上传衣服模块数据清空
			searchType(newVal) {
				if(newVal == 1) {
					_self.MTypeNameCurrentIndex = null
					_self.labelArr = ''
					_self.SeasonCurrentIndex = null
				}
			}
		},

		methods: {

			//拍照推荐衣服 2022/4/2 还未实现
			goRecommend() {
				let imgObj = {
					mTypeName: _self.MTypeNameStr,
					mImgDescribe: _self.labelArr,
					mTypeDescribe: _self.SeasonStr
				}
				//把对象转化成 json 字符串
			  const imgJson = JSON.stringify(imgObj)
				
				uni.navigateTo({
					url: `../recommend/recommend?recommendClothes=${imgJson}&id=${2}`
				})
				_self.searchType = 1
			},

			changeLight(e) {
				this.lightValue = e.detail.value
			},

			// 拍照事件 or 上传图片
			paizhao() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], // 这要注意，camera调拍照，album是打开手机相册
					success: (res) => {
						_self.tempFilePaths = res.tempFilePaths; // 这个api调完之后，会返还一个数组，带着照片的信息
						_self.searchType = 2
					}
				});
			},

			// 点击图片预览
			previewImg() {
				uni.previewImage({
					urls: _self.tempFilePaths,
					loop: true,
					indicator: 'default'
				})
			},

			// 返回首页事件
			goBackIndex() {
				_self.searchType = 1
			},

			// 上传图片事件
			goUploadPhoto() {
				uni.uploadFile({
					url: _self.$api.POST_USERS_IMG, //后端api接口
					filePath: _self.tempFilePaths[0], //uni.chooseImage函数调用后获取的本地文件路径
					name: 'file', //后端通过'file'获取上传文件的对象
					formData: {
						mTypeName: _self.MTypeNameStr,
						mImgDescribe: _self.labelArr,
						// mTypeDescribe: _self.SeasonStr,
						mTypeDescribe: '春季',
						id: _self.userId
					},
					success: (res) => {
						if (JSON.parse(res.data).succeed) {
							uni.showToast({
								title: '上传成功',
								icon: 'success',
								duration: 3000
							})
							_self.searchType = 1
							_self.goManagement()

						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					},
					//上传图片失败的回调
					fail() {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			},

			// 上下衣选择事件
			labelMTypeNameItem(index) {
				_self.MTypeNameCurrentIndex = index
				_self.MTypeNameStr = _self.labelMTypeName[index]
			},

			// 春夏秋冬选择事件
			labelSeasonItem(index) {
				_self.SeasonCurrentIndex = index
				_self.SeasonStr = _self.labelSeason[index]
			},

			goManagement() {
				_self.isShow2 = !_self.isShow2
				setTimeout(() => {
					uni.navigateTo({
						url: `../management/management?id=${_self.userId}`
					})
					_self.isShow2 = !_self.isShow2
				}, 50)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.content-item {
			width: 750rpx;
			height: 750rpx;
			background-color: #fafbfd;

			.TopTitle {
				position: fixed;
				top: 0;
				left: 0;
				width: 750rpx;
				z-index: 10;

				.TopTitle-item {
					padding-top: 40rpx;
					text-align: center;
					line-height: 88rpx;
					color: black;
					font-size: 16px;
					background-color: #33a69e;
				}
			}

			.index-body {
				width: 750rpx;
				height: 100vh;
				padding-top: 120rpx;
				padding-bottom: 300rpx;
				background-color: #f8f9fb;

				.index-body-item {
					width: 750rpx;
					height: 540rpx;
					background-color: #fafbfd;
					display: flex;
					justify-content: center;
					align-items: center;

					.photo-big {
						width: 450rpx;
						height: 450rpx;
						border-radius: 50%;
						border: 4rpx solid #33A69E;
						display: flex;
						justify-content: center;
						align-items: center;

						.photo-heart {
							width: 315rpx;
							height: 315rpx;
							border-radius: 50%;
							background-color: rgba(51, 166, 158, 1);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.photo-heart-icon {
								image {
									width: 100rpx;
									height: 100rpx;
								}
							}

							.photo-heart-title {
								color: white;
							}
						}
					}
				}

				.index-body-price {
					width: 100%;
					height: 8%;
					margin: 40rpx 0 40rpx 0;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.index-body-price-luminance {
						width: 20%;
						padding: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.price-luminance-title {
							font-size: 60rpx;
							font-weight: bold;
						}

						.price-luminance-percent {
							font-size: 26rpx;
							color: black;
						}
					}

					.index-body-price-line {
						height: 80%;
						border: 1rpx solid #d8d9db;
					}
				}

				.index-body-switch {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.index-body-switch-item {
						width: 300rpx;
						height: 180rpx;
						border-radius: 20rpx;
						background-color: #fdfffc;
						margin: 20rpx;
						padding: 0 90rpx 0 20rpx;
						box-shadow: 5rpx 5rpx 3rpx 4rpx rgba(0, 0, 0, .06);
						display: flex;
						justify-content: space-around;
						align-items: center;

						.index-body-switch-icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							background-color: #cfd0d4;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							image {
								width: 45rpx;
								height: 45rpx;
							}
						}
					}

					.index-body-switch-item-active {
						background-color: #f8f9fb;

						.index-body-switch-icon {
							background-color: rgba(51, 166, 158, 1);
						}
					}
				}

				.index-body-tail {
					height: 600rpx;
					margin: 25rpx;
					border-radius: 20rpx;
					background-color: #fdfffc;
					box-shadow: -3rpx -4rpx 4rpx 5rpx rgba(0, 0, 0, .1) inset;

					.index-body-tail-brightness {
						.index-body-tail-brightness-T {
							margin-bottom: 90rpx;
						}
					}

					.index-body-tail-T {
						padding: 0 50rpx;
						display: flex;
						justify-content: space-between;
						color: black;

						view {
							margin: 50rpx 0;
						}
					}
				}
			}

		}

		.uploadPhoto {
			.uploadPhoto-TopTitle {
				position: fixed;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 88rpx;
				padding-top: 40rpx;
				background-color: #f8f9fb;
				z-index: 10;

				.TopTitle-item1 {
					image {
						margin: 16rpx 0 0 16rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.uploadPhoto-item {
				padding: 120rpx 200rpx 0;
				margin-top: 40rpx;

				.uploadPhoto-photo {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.photo-item {
						width: 720rpx;
						height: 960rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
							object-fit: cover;
						}
					}
				}

				.uploadPhoto-item-list {
					display: flex;
					flex-direction: column;
					align-items: center;

					.uploadPhoto-list {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;
						margin: 10rpx;

						view {
							padding: 16rpx 28rpx;
							border-radius: 40rpx;
							margin: 20rpx;
							border: 1px #ccc solid;
						}

						.listItem {
							background: #f7f7f7;
						}

						.itemActive {
							background: #33a69e;
							color: white;
						}
					}

					.search {
						width: 60%;
						display: flex;
						align-items: center;
						.search-title {
							width: 15%;
						}
						.search-item {
							width: 90%;
						}
					}
				}
			}

			.toButton {
				display: flex;
				margin: 0 auto;
				width: 50%;

				button {
					width: 50%;
					margin: 50rpx 50rpx;
				}
			}
		}
	}
</style>
